<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <!-- list 组件会立即判定是否触发 onLoad事件 页面数据还未铺设完盒子高度为0 所以立即触发 immediate-check改为 false 则不会判定-->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
     :immediate-check="false"
     offset="50"
    >
    <!-- offset 滚动条与底部距离小于 offset 时触发load事件 默认300 -->
      <Articleltem
        v-for="obj in homeNewsList"
        :key="obj.art_id"
        :objList="obj"
        @article="articleFn"
        @report="reportFn"
        @rest="restFn"
        @click.native="articleClick(obj.art_id)"
      ></Articleltem>
      <!-- native穿透点击 -->
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// click.native 事件修饰符 -> 给组件内根标签，绑定原生的click点击事件
import { getChannelArticleApi, articleUnconcernApi, informChannelApi } from '@/api'
import Articleltem from '../../../components/ArticleItem.vue'
import Notify from '@/ui/hint' // 函数调用方式
export default {
  props: {
    channelId: Number // 当前频道id
  },
  data () {
    return {
      homeNewsList: [], // 文章列表数据
      finished: false, // 加载数据状态
      loading: false, // 底部刷新状态
      theTime: new Date().getTime(), // 分页  触底刷新  第一次为当前系统的时间戳
      isLoading: false // 顶部刷新状态
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Articleltem
  },

  // 当点击到此频道时初始化页面时获取当前频道数据并铺设
  async created () {
    const res = await this.theArticle()
    this.homeNewsList = res.data.data.results
  },
  methods: {
    // 获取当前频道数据
    async theArticle () {
      const res = await getChannelArticleApi({
        channel_id: this.channelId, // 当前频道的 id
        timestamp: this.theTime // 获取当前时间戳
      })
      this.theTime = res.data.data.pre_timestamp // 重置为上次数据的时间戳
      // 将获取的数据 返回给 Promise 对象
      return res
    },
    // 触底请求最新数据
    async onLoad () {
      // 切换到其他频道时会触发 onLoad事件 导致重复数据比created触发的要早(盒子失去宽度快速到上面)
      if (this.homeNewsList.length === 0) {
        this.loading = false // 重置 onLoad 事件
        return
      }
      const res = await this.theArticle()
      // 当 pre_timestamp 为 null时说明没有数据了
      if (res.data.data.pre_timestamp === null) {
        this.finished = true
        return
      }
      this.homeNewsList = [...this.homeNewsList, ...res.data.data.results] // 将获取的数据重新赋给文章列表数组
      this.loading = false // 重置 onLoad 事件
    },
    // 顶部刷新
    async onRefresh () {
      this.theTime = new Date().getTime() // 清空当前时间戳
      const res = await this.theArticle()
      this.homeNewsList = [] // 清空当前数组
      this.homeNewsList = res.data.data.results // 重新铺设数据
      this.isLoading = false
    },
    // 不感兴趣反馈
    async articleFn (id) {
      await articleUnconcernApi(id)
      Notify({ type: 'success', message: '反馈成功' }) // 反馈提示
    },

    // 举报反馈
    async reportFn (target, valId) {
      await informChannelApi(target, valId)
      Notify({ type: 'success', message: '举报成功' }) // 举报成功反馈提示
    },
    // 其他举报
    async restFn (target, valId, remark) {
      await informChannelApi(target, valId, remark)
      Notify({ type: 'success', message: '举报成功' }) // 举报成功反馈提示
    },

    // 文章 -> 点击 -> 跳转详情页面
    articleClick (id) {
      this.$router.push({
        path: `/Articledetail?art_id=${id}`
      })
    }
  }
}
</script>

<style>
</style>
